//////////////////////////////////////////////////////////////////////////////////////////
//   _  _ ____ _  _ ___  ____                                                           //
//   |_/  |__| |\ | |  \ |  |    This file belongs to Kando, the cross-platform         //
//   | \_ |  | | \| |__/ |__|    pie menu. Read more on github.com/kando-menu/kando     //
//                                                                                      //
//////////////////////////////////////////////////////////////////////////////////////////

// SPDX-FileCopyrightText: Simon Schneegans <code@simonschneegans.de>
// SPDX-License-Identifier: MIT

@use '../../variables.scss' as *;

.container {
  display: flex;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 15px;
  flex: 0 0 250px;
}

.themesGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.themeCard {
  position: relative;
  background-color: $widget-normal;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  aspect-ratio: 1;
  background-size: cover;
  background-position: center;

  box-shadow: 0 2px 8px light-dark(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));
  transition:
    transform 0.1s,
    box-shadow 0.1s;

  &:hover {
    box-shadow: 0 3px 10px light-dark(rgba(0, 0, 0, 0.5), black);
    transform: scale(1.01);
  }

  &.selected {
    outline: 2px solid $text-link;
  }

  &:active {
    box-shadow: 0 1px 5px light-dark(rgba(0, 0, 0, 0.5), black);
    transform: translateY(1px);
  }

  // Add some gloss.
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      170deg,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0.1) 30%,
      rgba(255, 255, 255, 0) 30.1%
    );
    pointer-events: none;
  }
}

.themeName,
.themeAuthor {
  padding: 10px 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  text-shadow:
    0 0 15px light-dark(rgba(255, 255, 255, 1), rgba(0, 0, 0, 1)),
    0 0 5px light-dark(rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.8)),
    0 0 2px light-dark(rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.8));
  color: light-dark(black, white);
}

$gradient-start: light-dark(rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3));
$gradient-end: light-dark(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0));

.themeName {
  font-size: 1.2em;
  padding-bottom: 30px;
  background: linear-gradient($gradient-start, $gradient-end);
}

.themeAuthor {
  padding-top: 30px;
  font-size: 0.8em;
  background: linear-gradient($gradient-end, $gradient-start);
}

.selectedOverlay {
  position: absolute;
  right: -2px;
  top: -2px;
  text-align: center;
  background-color: $text-link;
  color: light-dark(white, black);
  font-size: 1.7em;
  padding: 2px 2px 25px 25px;

  // triangle shape
  clip-path: polygon(0% 0%, 100% 100%, 100% 0%);
}
